<template>
  <div class="user_intro_box">
    <div class="box">
      <p style="color:red">注：没有输入信息时，点击更新按钮会清空对应的用户信息.</p>
      <ul>
        <li>
          <span>用户名:
            <span>
              {{$store.state.nowUserIntro.username}}
            </span>
          </span>
        </li>
        <li>
          <span>昵称</span>
          <input v-model="name" type="text" @blur="noChoseHandel" @focus="choseHandel" />
        </li>
        <li>
          <span>Github</span>
          <input v-model="github" placeholder="https://github.com/zhoubiao188" type="text" @blur="noChoseHandel" @focus="choseHandel" />
        </li>
        <li>
          <span>联系方式</span>
          <input v-model="phone" type="text" @blur="noChoseHandel" @focus="choseHandel" />
        </li>
        <li>
          <span>个人主页</span>
          <input v-model="email" type="text" placeholder="https://github.com/zhoubiao188 " @blur="noChoseHandel" @focus="choseHandel" />
        </li>
        <li>
          <span>QQ</span>
          <input v-model="qq" type="text" @blur="noChoseHandel" @focus="choseHandel" />
        </li>
        <li>
          <span>个人简介</span>
          <textarea v-model.trim="intro" placeholder="请不要超过100个字符" maxlength="100" @blur="noChoseHandel" @focus="choseHandel"></textarea>
          <p>100 / {{len}}</p>
        </li>
        <li @click="init">更新</li>
      </ul>
      <transition
        enter-active-class='animated zoomIn'
        leave-active-class='animated zoomOut'
      >
        <div class="init_Success" v-if="initSuccess">更新成功!</div>
      </transition>
    </div>
  </div>
</template>

<script>
import { changeUserIntro } from 'com/shuju'
export default {
  name: 'UserIntro',
  data () {
    return {
      name: '',
      github: '',
      phone: '',
      email: '',
      qq: '',
      intro: '',
      initSuccess: false
    }
  },
  computed: {
    len () {
      return this.intro.length
    }
  },
  methods: {
    init () {
      var sure = confirm('确定更新用户信息吗？')
      if (sure) {
        const data = new FormData()
        data.set('qqNum', this.qq)
        data.set('github', this.github)
        data.set('userProfile', this.intro)
        data.set('nickname', this.name)
        data.set('contact', this.phone)
        data.set('homepage', this.email)
        changeUserIntro(data, this)
      }
    },
    choseHandel () {
      event.target.parentNode.firstChild.style.color = 'rgb(15,153,213)'
    },
    noChoseHandel () {
      event.target.parentNode.firstChild.style.color = 'rgb(0,0,0)'
    }
  }
}
</script>

<style lang="stylus" scoped>
  .user_intro_box{
    width: 100%
    height: 630px
    box-sizing: border-box
    background-color: rgb(255,255,255)
    position: relative
    .box{
      width: 50%
      height: 100%
      margin: 0 auto
      box-sizing: border-box
      position: relative
      .init_Success{
        position: absolute
        top: 20%
        left: 40%
        width: 100px
        height: 90px
        text-align: center
        line-height: 90px
        color: rgb(15,103,213)
        background-color: rgba(200,200,200,.9)
      }
      ul{
        list-style: none
        padding: 0
        margin: 0
        display: flex
        flex-direction: column
        li:first-child{
          span{
            span{
              margin-left: .33rem
            }
          }
        }
        li{
          position: relative
          width: 100%
          height: 60px
          line-height: 50px
          box-sizing: border-box
          span{
            cursor: default
          }
          input{
            position: relative
            left: 35px
            width: 250px
            height: 32px
            padding: .1rem
            box-sizing: border-box
            font-size: .25rem
            border-radius: 5px
            outline: none
            border: 1px solid rgb(150,150,150)
          }
          textarea{
            position: absolute
            left: 72px
            top: 17px
            width: 247px
            height: 120px
            font-size: .25rem
            border-radius: 5px
            outline: none
            padding: .1rem
            box-sizing: border-box
            resize: none
            letter-spacing: 1.5px
            line-height: 18px
          }
          p{
            color: rgb(15,153,213)
            position: absolute
            bottom: -120px
            margin: 0
            margin-left: 75px
          }
          textarea:focus{
            border: 1px solid rgb(15,153,213)
          }
          input:focus{
            border: 1px solid rgb(15,153,213)
          }
        }
        li:nth-child(3){
          input{
            position: relative
            left: 15px
          }
        }
        li:nth-child(6){
          input{
            position: relative
            left: 42px
          }
        }
        li:nth-child(4){
          input{
            position: relative
            left: 4px
          }
        }
        li:nth-child(5){
          input{
            position: relative
            left: 4px
          }
        }
        li:last-child{
          position: absolute
          bottom: 10px
          left: 30%
          text-align: center
          cursor: pointer
          line-height: 40px
          border: 1px solid rgb(230,230,230)
          width: 100px
          height: 40px
          border-radius: 5px
          box-shadow: 0 0 1px rgb(15,200,213)
          background-color: rgb(15,153,213)
        }
        li:last-child:hover{
          color: white
        }
      }
    }
  }
</style>
